<template>
  <ElTable :data="data" @row-click="handleClick">
    <template v-for="item in options" :key="item.field">
      <ElTableColumn
        v-if="item.field === 'selection'"
        type="selection"
        :label="item.label ? item.label : '选择'"
        :width="item.width"
      ></ElTableColumn>
      <ElTableColumn
        v-else-if="item.field === 'index'"
        type="index"
        :label="item.label ? item.label : '序号'"
        :width="item.width"
      ></ElTableColumn>
      <template v-else-if="item.slots">
        <ElTableColumn :label="item.label ? item.label : item.field">
          <template #default>
            <div v-html="item.slots()"></div>
          </template>
        </ElTableColumn>
      </template>
      <ElTableColumn
        v-else
        :prop="item.field"
        :label="item.label ? item.label : item.field"
        :width="item.width"
      ></ElTableColumn>
    </template>
  </ElTable>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import { ElButton } from "element-plus";
const props = defineProps({
  data: { type: Array, default: () => [] },
  options: { type: Array, default: () => [] },
});
const emit = defineEmits(["curronRow"]);
function handleClick(row) {
  // console.log(row)
  emit("curronRow", row);
}
</script>
